<template>
	<div class="order">
		<div class="order-tt">{{titct}}</div>
		<div class="store-lt" v-if="orderNull">
			<ul>
				<li v-for="(item, $index) in orderNoList" :key="$index" @click="getOrderList(item, $index)">
					<div class="store-1" :class="{store1lab: item.isInsideOvertime || item.isTwoDeliver}">
						<p :class="{'a-up': !item.toggle, 'a-dw': item.toggle}"><i></i></p>
						<p>
							<span class="order_num">订单编号：{{item.orderNo}}</span>
							<span class="order_lab" v-if="item.isInsideOvertime">场内超时</span>
							<span class="order_lab" v-if="item.isTwoDeliver">二次妥投</span>
						</p>
					</div>
					<div class="u_loading" v-if="item.flag2">努力加载中....</div>
					<div class="u_loading" v-if="item.flag3">暂无数据</div>
					<transition name="slide-fade">
					<div class="store-2" v-if="item.toggle">
						<div>
							<p v-for="vaule in orderTimeInfo" :class="[vaule.nodeTimeOut==''?'order-df':'']">
								<span>{{vaule.nodeTime}}</span>
								<span>{{vaule.node}}</span>
								<b>{{vaule.nodeTimeOut}}</b>
								<i></i>
							</p>
						</div>					
					</div>					
					</transition>
				</li>				
			</ul>
		</div>
		<!-- 无数据时 -->
        <div class="nofind" v-else>
          <div class="nofind_pic">
            <img src="../assets/images/no_findgoods.png" >
          </div>
          <p>当前无异常订单</p>
        </div>
		<!-- 没有展示更多数据 -->
		<div class="order-nw" v-show="flag"><p>没有更多了，亲</p></div>
	</div>
</template>

<style lang="less">
	@import "../less/order/order.main.less";
</style>

<script type="text/ecmascirpt-6">
	import Vue from 'vue'
	import Cookie from 'js-cookie'
	import ORDER from '@/services/order'
	export default {
		name: 'unusual_store',
		computed: {},
		data (){
			return {
				// 是否显示文本没有更多
				flag: false,
				// 是否显示文本努力加载
				flag2: false,
				// 是否显示文本暂无数据
				flag3: false,	
				// 展开收缩状态		
				toggle: false,
				// 是否数据为空
				orderNull: true,
				// 标题
				titct: '',
				// 订单号列表
				orderNoList: [],
				// 每订单超时明细
				orderTimeInfo: []
			}
		},
		created () {
			// 桥接设置标题 及时展示
		  	bridge.setTitle('履约异常订单')
		},
		mounted(){
			// 从履约首页进入超时订单 存储来源页的基础数据
			Cookie.set('date', this.$route.query.date)
			Cookie.set('typeCode', this.$route.query.typeCode)
			Cookie.set('storeCode', this.$route.query.storeCode)
			Cookie.set('areaName', this.$route.query.areaName)
			// 请求前加载动画
			CommonUtil.indicator.open()
			// 桥接cookies方法
			bridge.getCookies((cookies) => {
		        let token = cookies.dz_auth_token
		        let body = {
		          storeCode: this.$route.query.storeCode || cookies.dz_area_code,
		          dataType: this.$route.query.dataType,
		          rangType: this.$route.query.rangType,
		          date: this.$route.query.date
		        }
		        console.log(body)
				ORDER.torder(token, body).then(({data})=>{
					// 请求完关闭动画
					CommonUtil.indicator.close()
					console.log(data)
					// 成功之后操作
					if (data.errorCode === 0) {
						this.titct = data.body.hintInfo
						if (typeof data.body.orderNoList !== 'undefined' && data.body.orderNoList.length) {
							this.orderNull = true
							this.flag = true
							this.orderNoList = data.body.orderNoList
						} else {
							this.orderNull = false
							this.flag = false
						}		
					} else {
						CommonUtil.toast(data.errorDesc || CommonUtil.interfaceTip)
					}
				})
			})
		},
		computed: {			

		},
		methods: {
			// 超时订单查询明细方法
			getOrderList(item, index) {
				// 重置为空
				this.orderTimeInfo = []
				// 状态取反操作
				if(item.toggle){
					item.toggle = false
					item.flag2 =false
					item.flag3 = false			
					return
				}else{
					item.flag2 =true
					item.flag3 = true
				}
				// 异步动态拿到数据后 做渲染动作
				this.$nextTick(() => {
					// 遍历选项状态
	　　　　　　　　this.orderNoList.forEach((item, index) => {
		　　　　　　　  Vue.set(item,'toggle', this.toggle)
						Vue.set(item,'flag3', this.flag3)
		　　　　　　})
					// 桥接cookies方法
					bridge.getCookies((cookies) => {
						let token = cookies.dz_auth_token
				        let body = {
				          storeId: this.$route.query.storeCode || cookies.dz_area_code,
				          orderNo: item.orderNo
				        }
				        console.log(body)
						ORDER.torderdetial(token, body).then(({data}) => {
							console.log(data)
							// 成功之后操作
							if (data.errorCode === 0) {
								setTimeout(() => {
									item.flag2 = false
					　　　　　　　　item.toggle = !this.toggle
									item.flag3 = !this.flag3
									if (data.body.orderTimeInfo !== null && data.body.orderTimeInfo.length) {
										item.flag3 = false
										this.orderTimeInfo = data.body.orderTimeInfo
									} else {
										item.flag3 = true
									}
								}, 200)
							} else {
								CommonUtil.toast(data.errorDesc || CommonUtil.interfaceTip)
							}
						})
					})
	　　　　　　})
			}
		}
	}
</script>